import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import i18n from '@/lang'

import '@/icons' // icon
import '@/permission' // permission control

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)
// 如果想要将翻译的责任交给 i18n 应该如下配置
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

Vue.config.productionTip = false

// 测试自定义指令
// Vue.directive(名字, 配置对象)
import { imgerror } from '@/directives'
Vue.directive('imgerror', imgerror)

// // 注册全局组件
// import PageTools from '@/components/PageTools'
// // 使用 Vue.component(组件名称, 组件的对象)
// Vue.component('PageTools', PageTools)

// 1. 纯粹 js 的封装方法
// import obj from '@/components'
// obj.zhuce()
// 2. 为了避免不同组件作者, 任性地创建离奇古怪的函数名
// 约定了一种做法

import components from '@/components'
// Vue.use(components) 会自动执行 components 里面的 install 方法
Vue.use(components)

// // 注册全局过滤器
// // Vue.filter(过滤器名, 过滤器函数)
// Vue.filter('formatDate', (oldValue) => {
//   console.log(oldValue)
//   // 最简单的格式化方法,
//   // 1.转换为日期对象
//   const date = new Date(oldValue)
//   // 2.调用 toLocaleString 方法转换成用户浏览器的对应设置格式
//   return date.toLocaleString()
// })

// 以下演示大量过滤器同时注册的封装方法
// 1. 演示单独一个的引入方法
// import { formatDate, a } from '@/filters'
// Vue.filter('formatDate', formatDate)

// 2. 演示一次将一个文件里面的所有方法全部引入的语法
import * as filters from '@/filters'
// 下面有更详细的解释, 不过这里我们用更加简单的用法 forin 进行遍历
for (const key in filters) {
  // console.log(key)
  // key 就是过滤器名, filters[key] 就是过滤器函数体
  Vue.filter(key, filters[key])
}

// function a() {}
// obj = {
//   // a
//   'a': a
// }

// console.log('filter')
// console.log(filters)

// // 遍历这个对象的所有属性, 进行注册
// // 对于每一个属性, 咱们需要两个数据 1. 名称 2. 函数体
// // Vue.filter(名称, 函数体)
// // Object.keys(obj) 可以得到一个数组, 包括所有的key
// const keys = Object.keys(filters)
// // ['formatDate', 'a']
// keys.forEach(key => {
//   // 遍历时拿到 key 名字, 作为过滤器名
//   const filterName = key
//   // 遍历时利用 key 在 obj 中拿回函数体, 作为过滤器函数
//   const func = filters[key]
//   // 有了名字, 有了函数体就可以注册过滤器
//   Vue.filter(filterName, func)
// })

import Print from 'vue-print-nb'
Vue.use(Print)

// Mixin 混入的语法
// Vue.mixin({
//   // 这个对象可以写 vue 组件内支持的任意内容
//   // 这里写的内容, 会被自动混入到所有的 vue 组件当中
//   methods: {
//     showTen() {
//       console.log(10)
//     }
//   }
// })
import checkPermissionMixin from '@/mixin/checkPermission'
Vue.mixin(checkPermissionMixin)

// 演示最简单的多语言国际化插件使用办法
// // 1.引入库
// import VueI18n from 'vue-i18n'
// // 2. Vue.use 注册
// Vue.use(VueI18n)
// // 3. 创建实例, 提供配置(字典)
// const i18n = new VueI18n({
//   // 配置1, 当前语言设定
//   locale: 'cn',
//   // 配置2, 字典
//   messages: {
//     cn: {
//       student: {
//         name: '学生',
//         number: '学号'
//       },
//       worker: {
//         name: '工人',
//         number: '工号'
//       }
//     },
//     en: {
//       hi: 'hi'
//     }
//   }
// })

new Vue({
  el: '#app',
  router,
  store,
  // 4. 挂载到 vue 上面
  i18n,
  render: h => h(App)
})
